[V0_FILE]typescriptreact:file="components/contact-list.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronLeft, ChevronRight, Phone, Mail, Copy } from "lucide-react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" export default function ContactList() { const [selected, setSelected] = useState(0) return (

{/* Table Header */}

{selected} selected

{/* Table Column Headers */}

Contact

Data points

Company

{/* Contact Rows */}

{/* Contact 1 */}

Geoffrey Thyne

Chief Technology Officer

Engineered Salinity - ESal

Oil, Gas & Mining, Oil & Gas +1

{/* Contact 2 */}

Shayne Coplan

Founder and Chief Executive Officer

Polymarket

Technology, Information & Media, Software Developer

{/* Contact 3 */}

Adriaan Kolff

Co - Founder and Chief Executive...

Matchr

Administrative & Support Services, Staffing & Recruit...

{/* Contact 4 */}

Raghavendra Gandadi

Head of Engineering

Smartlead

Business Services, Advertising & Marketing Services

{/* Contact 5 */}

Chanchal Singh

Founder and Director

DataQua9t

Technology, Information & Media, Software Developer

{/* Contact 6 */}

Brijen Brahmbhatt

Head - Talent and People Operatio...

Notchup

Technology, Information & Media, Software Developer

{/* Pagination */}

Go to page

... ...

175 - 200 of 745K

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Search, ChevronDown, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import ContactList from "@/components/contact-list" import FilterSidebar from "@/components/filter-sidebar" export default function ContactSearchPage() { const [showFilters, setShowFilters] = useState(true) const [searchCategory, setSearchCategory] = useState("Contacts") const [searchInResults, setSearchInResults] = useState(true) const [activeTab, setActiveTab] = useState("contacts") return (

{/* Search Header */}

Search

{searchCategory}

{searchInResults && (

Search in results

)}

How it works? Beta

{/* Tabs */}

{/* Mobile Filter Toggle */}

{/* Main Content */}

{(showFilters || window.innerWidth >= 640) && (

)}

) } [V0_FILE]typescriptreact:file="components/filter-sidebar.tsx" isEdit="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export default function FilterSidebar() { const [employeeHeadcountFilters, setEmployeeHeadcountFilters] = useState(['1 - 10', '11 - 50']); const removeHeadcountFilter = (filter: string) => { setEmployeeHeadcountFilters(employeeHeadcountFilters.filter(f => f !== filter)); }; return (

Filters (4)

{/* Industry */}

Industry

{['Technology', 'Healthcare', 'Finance', 'Education', 'Retail'].map((industry) => (

{industry}

))}

{/* Employee headcount */}

Employee headcount

{employeeHeadcountFilters.length > 0 && ( )}

{employeeHeadcountFilters.map((filter) => ( {filter} ))}

{['1 - 10', '11 - 50', '51 - 200', '201 - 500', '501 - 1,000', '1,001 - 5,000', '5,001 - 10,000', '10,001+'].map((size) => (

{ if (e.target.checked) { setEmployeeHeadcountFilters([...employeeHeadcountFilters, size]); } else { removeHeadcountFilter(size); } }} /> {size}

))}

{/* Revenue */}

Revenue

{['$0 - $1M', '$1M - $10M', '$10M - $50M', '$50M - $100M', '$100M - $500M', '$500M - $1B', '$1B+'].map((revenue) => (

{revenue}

))}

{/* Funding */}

Funding

{['Seed', 'Series A', 'Series B', 'Series C', 'Series D+', 'Private Equity', 'IPO', 'Acquired'].map((funding) => (

{funding}

))}

{/* Technology */}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This